<template>
  <div v-if="show">
    <el-dialog :visible.sync="dialogVisible" fullscreen append-to-body>
      <el-container>
        <el-main style="height:calc(100vh  - 160px); padding: 0 45px;">
          <div class="score">
            <el-button type="primary" @click="exportExcel(cepingHdglb.hdName)">导出统计表</el-button>
          </div>
          <div class="customTableHeader">
            <div class="customTableTitle">{{ cepingHdglb.hdName }}</div>
            <div class="customTableSummary flex justifyContentSpaceBetween">
              <div>
                测评时间：{{ $moment(cepingHdglb.hdKssj).format("YYYY年MM月DD日") }}
              </div>
              <div class="flex fontweight blue">
                测评率：{{ cpl }}%
              </div>
            </div>
          </div>
          <div class="cpTable">
            <el-table ref='cpphz-table' :data="tableData" border stripe height="calc(100vh - 287px)">
              <el-table-column label="序号" width="100" type="index">
              </el-table-column>
              <el-table-column prop="bcpDeptName" label="部门" min-width="200" header-align="center" align="center"
                               v-if="cepingHdglCppmxbInfo.cpgzBpfdx=='部门'">
              </el-table-column>
              <el-table-column prop="bcpUserName" label="姓名" min-width="200" header-align="center" align="center"
                               v-if="cepingHdglCppmxbInfo.cpgzBpfdx=='个人'">
              </el-table-column>
              <el-table-column :prop="'zb_'+t1.id" :label="t1.zbMc" min-width="120" header-align="center" align="center"
                               v-for="(t1,i1) in cepingXmmxbListTree" :key="i1*10000">
                <el-table-column :prop="'zb_'+t2.id" :label="t2.zbMc" min-width="120" header-align="center"
                                 align="center" v-if="t1.children" v-for="(t2,i2) in t1.children"
                                 :key="i1*10000+i2*100">
                  <el-table-column :prop="'zb_'+t3.id" :label="t3.zbMc" min-width="120" header-align="center"
                                   align="center" v-if="t2.children" v-for="(t3,i3) in t2.children"
                                   :key="i1*10000+i2*100+i3">
                  </el-table-column>
                </el-table-column>
              </el-table-column>
              <el-table-column prop="cpFz" label="指标汇总" min-width="100" header-align="center" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.hj==true||cepingHdglCppmxbInfo.djxxDjmx!=''">
                    {{ scope.row.cpFz }}
                  </span>
                  <span v-else style="color: #3e51a3;cursor: pointer;" @click="showMx(scope.row)">
                    {{ scope.row.cpFz }}
                  </span>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="cpDj" label="评价等次" min-width="100" header-align="center" align="center"
                               v-if="cepingHdglCppmxbInfo.djxxDjmx!=''">
              </el-table-column>
              <el-table-column prop="cpZf" label="评测成绩" min-width="100" header-align="center" align="center"
                               v-if="cepingHdglCppmxbInfo.djxxDjmx!=''">
                <template slot-scope="scope">
                  <span style="color: #3e51a3;cursor: pointer;" @click="showMx(scope.row)">
                    {{ scope.row.cpZf }}
                  </span>
                </template>
              </el-table-column> -->
              <el-table-column label="测评结果" min-width="100" header-align="center" align="center" v-if="pmShow">
                <template slot-scope="scope">
                  <span v-if="scope.row.hj==true">
                    ---
                  </span>
                  <span v-else>
                    <span v-if="((scope.$index*1)/jlts)*100<=pm1">{{pmName[0]}}</span>
                    <span v-else-if="((scope.$index*1)/jlts)*100<=(pm1+pm2)">{{pmName[1]}}</span>
                    <span v-else-if="((scope.$index*1)/jlts)*100<=(pm1+pm2+pm3)">{{pmName[2]}}</span>
                    <span v-else-if="((scope.$index*1)/jlts)*100<=(pm1+pm2+pm3+pm4)">{{pmName[3]}}</span>
                    <span v-else>{{pmName[4]}}</span>
                  </span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer flex justifyContentSpaceBetween">
        <div class="flex alignItemsCenter">
          <div class="font16">
            排名设置：<el-checkbox v-model="pmShow" class="font16">显示排名</el-checkbox>
          </div>
          <div v-if="pmShow" style="margin:0 10px" class="font16">
            <el-button type="primary" @click="szDialogVisible = true">排名设置</el-button>
          </div>
        </div>
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog title="排名设置" :visible.sync="szDialogVisible" width="370px" append-to-body>
      <el-container>
        <el-main style="max-height:60vh">
      <div style="margin-bottom:20px;margin-left: 30px;">
        <el-input v-model="pmName[0]" style="width: 100px;"></el-input>
        <el-input-number v-model="pm[0]" :min="0" class="ml10"></el-input-number>%
            <div v-show="pm[0] > 100" class="red">* 输入的范围小于100%</div>
      </div>
      <div style="margin-bottom:20px;margin-left: 30px;">
        <el-input v-model="pmName[1]" style="width: 100px;"></el-input>
        <el-input-number v-model="pm[1]" :min="0" class="ml10"></el-input-number>%
            <div v-show="pm[1] > 100" class="red">* 输入的范围小于100%</div>
      </div>
      <div style="margin-bottom:20px;margin-left: 30px;">
        <el-input v-model="pmName[2]" style="width: 100px;"></el-input>
        <el-input-number v-model="pm[2]" :min="0" class="ml10"></el-input-number>%
            <div v-show="pm[2] > 100" class="red">* 输入的范围小于100%</div>
      </div>
      <div style="margin-bottom:20px;margin-left: 30px;">
        <el-input v-model="pmName[3]" style="width: 100px;"></el-input>
        <el-input-number v-model="pm[3]" :min="0" class="ml10"></el-input-number>%
            <div v-show="pm[3] > 100" class="red">* 输入的范围小于100%</div>
      </div>
      <div style="margin-bottom:20px;margin-left: 30px;">
        <el-input v-model="pmName[4]" style="width: 100px;"></el-input>
        <el-input-number v-model="pm[4]" :min="0" class="ml10"></el-input-number>%
            <div v-show="pm[4] > 100" class="red">* 输入的范围小于100%</div>
      </div>
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button @click="szDialogVisible = false">关闭</el-button>
        <el-button type="primary" @click="pmQr">确定设置</el-button>
      </span>
    </el-dialog>
    <el-dialog title="明细查询" :visible.sync="mxDialogVisible" :width="cepingHdglCppmxbInfo.djxxDjmx!=''?'1800px':'1000px'" append-to-body>
      <div style="margin-bottom:20px">
        <el-table ref="zbABTable" :data="mxList" border stripe height="400px">
          <el-table-column label="序号" width="100" type="index" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="cpCode" label="票种" min-width="100" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.cpCode }}票
            </template>
          </el-table-column>
          <el-table-column prop="cpCsl" label="总票数" min-width="100" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.cpCsl }}票
            </template>
          </el-table-column>
          <el-table-column prop="cpDsl" label="提交票数" min-width="100" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.cpDsl }}票
            </template>
          </el-table-column>
          <el-table-column prop="cpQz" label="票种权重" min-width="100" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.cpQz }}%
            </template>
          </el-table-column>
          <el-table-column prop="cpQzpjf" label="平均分数" min-width="120" header-align="center" align="center">
          </el-table-column>
          <el-table-column prop="cpqz" label="测评项权重" min-width="120" header-align="center" align="center" v-if="cepingHdglCppmxbInfo.djxxDjmx!=''">
            <template slot-scope="scope">
              {{ scope.row.cpqz }}%
            </template>
          </el-table-column>
          <el-table-column prop="cpQzpjfCph" label="测评项分数" min-width="120" header-align="center" align="center" v-if="cepingHdglCppmxbInfo.djxxDjmx!=''">
          </el-table-column>
          <el-table-column prop="dcqz" label="等次项权重" min-width="120" header-align="center" align="center" v-if="cepingHdglCppmxbInfo.djxxDjmx!=''">
            <template slot-scope="scope">
              {{ scope.row.dcqz }}%
            </template>
          </el-table-column>
          <el-table-column prop="cpQzpjfDch" label="等次项分数" min-width="120" header-align="center" align="center" v-if="cepingHdglCppmxbInfo.djxxDjmx!=''">
          </el-table-column>
          <el-table-column prop="cpQzpjfZzfs" label="测评分数" min-width="100" header-align="center" align="center" v-if="cepingHdglCppmxbInfo.djxxDjmx!=''">
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportExcelAB">导出</el-button>
        <el-button type="primary" plain @click="mxDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  hzInfo, bcpHzInfo
} from '@/api/ceping/cepinghdglhdcphzb'
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

export default {
  name: "cepinghdcphzDialog",
  data() {
    return {
      show: false,
      dialogVisible: false,
      szDialogVisible: false,
      mxDialogVisible: false,
      cepingHdglb: {},
      cepingHdglCppmxbInfo: {},
      cepingXmmxbList: [],
      cepingHdglHdcphzbList: [],
      cepingHdglHdhzmxbList: [],
      cepingXmmxbListTree: [],
      tableData: [], //指标结构
      cpl: 0,
      jlts: 0,
      pm1: 20,
      pm2: 20,
      pm3: 20,
      pm4: 20,
      pm5: 20,
      pm: [20, 20, 20, 20, 20],
      pmName: ["A", "B", "C", "D", "E"],
      pmShow: true,
      mxList: []
    }
  },
  methods: {
    init(hdId, cppId) {
      this.cpl = 0;
      this.show = false;
      this.pm1 = 20;
      this.pm2 = 20;
      this.pm3 = 20;
      this.pm4 = 20;
      this.pm5 = 20;
      this.pm = [20, 20, 20, 20, 20];
      this.pmName = ["A", "B", "C", "D", "E"];
      this.pmShow = true;
      hzInfo(hdId, cppId).then(res => {

        //console.log("WWW:"+JSON.stringify(res.data.data))

        this.cepingHdglb = res.data.data.cepingHdglb;
        this.cepingHdglCppmxbInfo = res.data.data.cepingHdglCppmxbInfo;
        this.cepingXmmxbList = res.data.data.cepingXmmxbList;
        this.cepingHdglHdcphzbList = res.data.data.cepingHdglHdcphzbList;
        this.cepingHdglHdhzmxbList = res.data.data.cepingHdglHdhzmxbList;

        this.cepingXmmxbListTree = this.getTree(this.cepingXmmxbList, 0);
        //console.log(this.cepingXmmxbListTree)

        //设置表格数据
        let data = [];
        let Zps = 0;
        let Dps = 0;
        //console.log(this.cepingHdglHdcphzbList)
        let hj = {};
        for (var i in this.cepingHdglHdcphzbList) {
          var info = this.cepingHdglHdcphzbList[i];
          Zps += info.cpZps;
          Dps += info.cpDps;
          for (var j in this.cepingHdglHdhzmxbList) {
            let r = this.cepingHdglHdhzmxbList[j];
            if (this.cepingHdglCppmxbInfo.cpgzBpfdx == "部门" && r.bcpDeptId == info.bcpDeptId) {
              info["zb_" + r.zbId] = r.zbFz;
              if (hj["zb_" + r.zbId]) {
                hj["zb_" + r.zbId] += r.zbFz;
              } else {
                hj["zb_" + r.zbId] = r.zbFz;
              }
            }
            if (this.cepingHdglCppmxbInfo.cpgzBpfdx == "个人" && r.bcpUserId == info.bcpUserId) {
              info["zb_" + r.zbId] = r.zbFz;
              if (hj["zb_" + r.zbId]) {
                hj["zb_" + r.zbId] += r.zbFz;
              } else {
                hj["zb_" + r.zbId] = r.zbFz;
              }
            }
          }
          if (hj["cpFz"]) {
            hj["cpFz"] += info.cpFz;
          } else {
            hj["cpFz"] = info.cpFz;
          }
          data.push(info);
        }
        if (Zps == 0 || Dps == 0) {
          this.cpl = 0;
        } else {
          this.cpl = Math.round(Dps / Zps * 100 * 100) / 100;
        }

        this.jlts = data.length;
        //排序从大到小
        data.sort(function(a,b){
            //return a.cpFz-b.cpFz //a-b为升序
            return b.cpFz-a.cpFz  //b-a为降序
        })
        //合计
       //console.log(hj)
        if (data.length > 1) {
          for (var x in hj) {
            hj[x] = Math.round(hj[x] / data.length * 100) / 100
          }
          hj.bcpDeptName = "平均成绩";
          hj.bcpUserName = "平均成绩";
          hj.hj = true;
          data.push(hj);
        }
        
        this.tableData = data;
        
        this.show = true;
        this.dialogVisible = true;
      })
    },
    getTree(ary, pid) {
      return ary.filter(v => {
        if (v.pid === pid) {
          if (v.pid === 0) {
            v.xh = 1;
          } else {
            for (var a = 0; a < ary.length; a++) {
              if (ary[a].id == v.pid) {
                v.xh = ary[a].xh + 1;
              }
            }
          }
          return v
        }
      }).map(v => {
        const children = this.getTree(ary, v.id);
        if (children.length) v.children = this.getTree(ary, v.id);
        return v
      });
    },
    pmQr() {
      let num = 0;
      for (var i in this.pm) {
        if(this.pm[i]==null){
          this.pm[i] = 0;
          this.$set(this.pm,i,0)
        }
        num += this.pm[i]
      }
      if (num != 100) {
        this.$notify.closeAll();
        this.$notify.error("您设置的排名比率总和为“" + num + "%”，不是100%，无法这样应用")
        return;
      }
      if(this.pm[1]>0 && this.pm[0]==0){
        this.$notify.closeAll();
        this.$notify.error("您设置的排名"+this.pmName[1]+"为“" + this.pm[1] + "%”，但A为“0%”，无法这样应用")
        return;
      }
      if(this.pm[2]>0 && this.pm[1]==0){
        this.$notify.closeAll();
        this.$notify.error("您设置的排名"+this.pmName[2]+"为“" + this.pm[2] + "%”，但B为“0%”，无法这样应用")
        return;
      }
      if(this.pm[3]>0 && this.pm[2]==0){
        this.$notify.closeAll();
        this.$notify.error("您设置的排名"+this.pmName[3]+"为“" + this.pm[3] + "%”，但C为“0%”，无法这样应用")
        return;
      }
      if(this.pm[4]>0 && this.pm[3]==0){
        this.$notify.closeAll();
        this.$notify.error("您设置的排名"+this.pmName[4]+"为“" + this.pm[4] + "%”，但D为“0%”，无法这样应用")
        return;
      }
      this.pm1 = this.pm[0];
      this.pm2 = this.pm[1];
      this.pm3 = this.pm[2];
      this.pm4 = this.pm[3];
      this.pm5 = this.pm[4];
      this.szDialogVisible = false;
    },
    /**
     * excel 导出
     */
    exportExcel(excelName) {
      try {
        const $e = this.$refs['cpphz-table'].$el
        let $table = $e.querySelector('.el-table__fixed')
        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {
          raw: true
        })

        const wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    },
    showMx(row) {
      this.mxList = [];
      bcpHzInfo(row.hdId, row.cppId, row.bcpDx == "部门" ? row.bcpDeptId : row.bcpUserId, row.bcpDx == "部门"?2:1).then(res => {
        this.mxList = res.data.data;
        this.mxDialogVisible = true;
      });
    },
    exportExcelAB(){
      const excelName = this.cepingHdglb.hdName + "_明细"
      try {
        const $e = this.$refs['zbABTable'].$el
        let $table = $e.querySelector('.el-table__fixed')
        if (!$table) {
          $table = $e
        }
        const wb = XLSX.utils.table_to_book($table, {
          raw: true
        })

        const wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        FileSaver.saveAs(
          new Blob([wbout], {
            type: 'application/octet-stream'
          }),
          `${excelName}.xlsx`,
        )
      } catch (e) {
        if (typeof console !== 'undefined') console.error(e)
      }
    }
  }
}

</script>

<style scoped>
</style>
